<div class="panel panel-default" ng-controller="SingleServerController">
  <div class="panel-heading">
    <b>{{ server.name }}</b>
  </div>
  <div class="panel-body">

    <div class="row">
      <div class="col-md-3">
        <div id="{{'cpu-gauge-' + server.name}}" c3-gauge value="cpuPercent" height="height"></div>

        <div class="chart-label text-center">
          <span>CPU</span>
        </div>
      </div>
      <div class="col-md-3">

        <div id="{{'ram-gauge-' + server.name}}" c3-gauge value="ramPercent" height="height"></div>
        <div class="chart-label text-center">
          <span>RAM</span>
          <br>
          <span><b>{{usedRam | toSizeString}} / {{maxRam | toSizeString}}</b></span>
        </div>
      </div>
      <div class="col-md-3">

        <div id="{{'disk-cache-gauge-' + server.name}}" c3-gauge value="diskCache" height="height"></div>
        <div class="chart-label text-center">
          <span>DISK CACHE</span>
          <br>
          <span><b>{{totalDiskCache | toSizeString}} / {{maxDiskCacke | toSizeString}}</b></span>
        </div>
      </div>
      <div class="col-md-3">

        <div id="{{'disk-gauge-' + server.name}}" c3-gauge value="diskPercent" height="height"></div>
        <div class="chart-label text-center">
          <span>DISK</span>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-md-6">
        <b>Status:</b> <span ng-class="getStatusLabel(server.status)">{{ server.status }}</span>

        <a ng-show="!agentActive" href="javascript:void(0)" tabindex="1"
           data-trigger="focus" data-placement="bottom"
           data-content="{{ 'agent.notFound' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a>
      </div>
      <div class="col-md-6">
        <b>Operations:</b> {{operations}} /s</span>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <b>Active Connections:</b> {{connections}}</span>
      </div>
      <div class="col-md-6">
        <b>Network Requests:</b> {{requests}} /s</span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <b>Average Latency:</b> {{latency}} ms</span>
      </div>
      <div class="col-md-6">
        <b>Warnings:</b> {{ tips }} </span>
      </div>
    </div>
  </div>
</div>
